<template>
  <div class="news">
    <div class="table">
      <p>{{ text }}</p>
    </div>
    <div class="two_nav clearfloat">
      <div class="two_nav_title">News</div>
      <div class="item_box">
        <swiper ref="swiper_aboutUs"
                :options="swiperOption">
          <swiper-slide class="swiper-slide"
                        v-for="(item, index) in news_cate"
                        :key="index">
            <div exact
                 :to="{ name: 'en_professional' }"
                 class="two_nav_item"
                 :class="currentNavIndex == item.id ? 'activeNav' : ''"
                 @click="onTabble(item.id, item.title)">
              <span>{{ item.title }}</span>
            </div>
          </swiper-slide>
          <!-- <swiper-slide class="swiper-slide">
            <div
              exact
              :to="{name:'en_problem'}"
              class="two_nav_item"
              :class="currentNavIndex=='00'?'activeNav':''"
              @click="onTabble('00')"
            >
              <span>Answer</span>
            </div>
          </swiper-slide> -->
        </swiper>
      </div>
    </div>
    <keep-alive :include="/professional/">
      <router-view ref="chidlen"></router-view>
    </keep-alive>
  </div>
</template>
<script>
import { news_article_cate, news_list } from '@/api/news.js'
export default {
  data() {
    return {
      text: '',
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 0,
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: '#swiper-button-next',
          prevEl: '#swiper-button-prev',
        },
        bserver: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //鼠标变成抓手型
        grabCursor: true,
        //开启鼠标滚轮控制Swiper切换
        // mousewheel: true,
      },
      news_cate: [{ title: null }, { title: null }],
      news_list: [],
      currentNavIndex: null,
    }
  },
  async mounted() {
    var news_cate
    let state = this.$store.state.headTitle

    if (state.NewsCate.length > 0) {
      news_cate = state.NewsCate.EN
    } else {
      let res = await news_article_cate()
      this.$store.commit('changeNewsCate', res.data.data)
      news_cate = res.data.data.EN
    }

    this.news_cate = news_cate

    if (state.NewsCateCurrentEN) {
      this.currentNavIndex = state.NewsCateCurrentEN
    } else {
      this.$store.commit('changeNewsCateCurrentEN', news_cate[0].id)
      this.currentNavIndex == news_cate[0].id
    }
    let index = news_cate.findIndex((item) => item.id == this.currentNavIndex)



    if (index != -1) {
      this.text = news_cate[index].title
    } else {
      this.text = news_cate[0].title
    }
  },
  watch: {
    '$store.state.headTitle.NewsCateCurrentEN': {
      deep: true,
      handler: function (newValue, oldValue) {
        this.currentNavIndex = newValue

        let index = this.news_cate.findIndex(
          (item) => item.id == newValue
        )
        this.text = this.news_cate[index].title
      },
    },
    '$route.query.id': {
      deep: true,
      handler: function (newValue, obdValue) {
        console.log(newValue)

        let index = this.news_cate.findIndex(
          (item) => item.id == this.$route.query.id
        )
        this.text = this.news_cate[index].title
      },
    },
  },
  methods: {
    onTabble(id) {
      this.currentNavIndex = id;
      this.$store.commit('changeNewsCateCurrentEN', id);
    

      if (id == '00') {
        this.$router.push({ name: 'en_problem', query: {} })
      } else {
        try {
          this.$router.push({ name: 'en_professional' })
        } catch (error) {
          console.log('已经在当前页面了')
        }
      }
        this.$refs.chidlen.$data.currentPage = 1;
    },
  },
}
</script>
<style scoped src="./sass/news.css"></style>
